import React, { PureComponent } from 'react';

import styled from 'styled-components'

/*
  特性：
    1.props穿透
    2.attrs的使用
    3.传入state作为props属性
*/
//attrs 本身作为一个函数被调用 会返回一个函数 所以可以接着使用标签模板字符串调用
const MyInput  = styled.input.attrs({
  placeholder: '请输入密码.....',
  bColor: 'blue'
})`
  background-color: pink;
  border: 1px solid ${props => props.bColor};
  color: ${props => props.color};
`
const H4Profile = styled.h4`
  color: ${props => props.theme.themeColor };
  font-size: ${props => props.theme.themeFontSize };
`
export default class Profile extends PureComponent {
  constructor(props) {
    super(props)
    
    this.state = {
      color: 'red'
    }
  }
  
  render() {
    return (
      <div>
        <input type="password" style={{marginRight: '10px'}}/>
        {/*  
          1.同上input   
          2.属性可以直接写在标签上也可以使用attrs传入到props 
          3.传入动态color也会合并attrs的属性传入到props里
        */}
        <MyInput type="password" color={this.state.color} />

        <H4Profile>Profile - 使用共享样式</H4Profile>
        <ul>
          <li>设置列表1</li>
          <li>设置列表2</li>
          <li>设置列表3</li>
        </ul>
      </div>
    )
  }
}
